<!DOCTYPE html>
<html lang="en">
<head>
    <script src="../js/vue.js"></script>
    <title>数据监视</title>
</head>
<body>
    <!-- 
        1.监视的属性变化时,回调函数自动调用,进行相关操作
        2.属性必须存在,才能进行监视
        3.Vue中定时器中的函数要用箭头函数,因为它没有this,会往外找,就找到了Vue实例
        监视的两种写法:
            (1)new Vue时在配置对象中传入watch
            (2)使用vm.$watch={//完整写法的对象},
        备注:
            1.所有Vue所调用(管理)的函数,都不能写成箭头函数,如watch中handler,是Vue帮助我们调用的
            2.所有Vue不是所调用(管理)的函数,都要写成箭头函数,如ajax\定时器的函数
            3.watch就是Vue给我们提供的监测数据改变的手段,至于数据改变后要干什么又业务决定

     -->
    <div id="root">
        姓：<input type="text" v-model='firstName'><br> <br>
        名：<input type="text" v-model='lastName'><br> <br>
        全名：<span>{{fullName}}</span><br> <br>
    </div>

    <script>
        let vm = new Vue({
            el:'#root',
            data:{//收集到_data中，在通过数据代理绑定到vm中
               firstName:'张',
               lastName:'三',
               fullName:''
            },
            /*
                1.watch中的firstName什么时候调用？firstName被改变时调用
                2.
                3.vm中没有挂在watch，自己监视就行了，不用绑到vm
            */
            watch:{
                //检测姓
                /*firstName: function(newValue,oldValue){
                    console.log('firstName被修改了');
                    fullName = newValue+'-'+this.lastName;
                }, */
                //检测姓：完整写法
                firstName:{
                    immediate:true,//若为true，则在初始时就会调用一次
                    handler(newValue,oldValue){
                        fullName = newValue+'-'+this.lastName;
                    }
                },
                //检测名
                lastName: function(newValue,oldValue){
                    console.log('lastName被修改了');
                    fullName = this.lastName+'-'+newValue;
                }
            }
        });
        
    </script>    
</body>
</html>